<template>
    <el-form :model="form" :rules="rules" ref="form" label-width="100px">
      <el-form-item label="昵称" prop="nickname">
        <el-input v-model="form.nickname"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="form.email"></el-input>
      </el-form-item>
      <el-form-item label="订单号" prop="orderId">
        <el-input v-model="form.orderId"></el-input>
      </el-form-item>
      <el-form-item label="评分" prop="rating">
        <el-rate v-model="form.rating" :max="5"></el-rate>
      </el-form-item>
      <el-form-item label="评价" prop="comment">
        <el-input type="textarea" v-model="form.comment" :rows="4"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm" :loading="loading">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </template>
  
  <script>
  export default {
    data() {
      return {
        form: {
          nickname: '',
          email: '',
          orderId: '',
          rating: 5,
          comment: ''
        },
        rules: {
          nickname: [
            { required: true, message: '请输入昵称', trigger: 'blur' }
          ],
          email: [
            { required: true, message: '请输入邮箱', trigger: 'blur' },
            { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
          ],
          orderId: [
            { required: true, message: '请输入订单号', trigger: 'blur' }
          ],
          rating: [
            { required: true, message: '请选择评分', trigger: 'change' }
          ]
        },
        loading: false
      }
    },
    methods: {
      submitForm() {
        this.$refs.form.validate(valid => {
          if (valid) {
            this.loading = true
            this.$store.dispatch('submitEvaluation', this.form)
              .then(() => {
                this.$message.success('评价提交成功')
                this.$emit('submit-success')
                this.resetForm()
              })
              .catch(error => {
                this.$message.error(error.response?.data?.message || '评价提交失败')
              })
              .finally(() => {
                this.loading = false
              })
          }
        })
      },
      resetForm() {
        this.$refs.form.resetFields()
        this.form.rating = 5
      }
    }
  }
  </script>